<template>
  <div class="addDiscussContainer autoGrow flex-row">
    <div class="chooseAccount flex-column">
      <div class="mainAccount">
        <choose-service-account
          @serviceChange="mainServiceChange"
          :description="isDiscuss ? '建讨论组账号（群主账号）' : '选择客服账号（群主账号）'"
          :multiple="false"
        ></choose-service-account>
      </div>
      <div class="assistAccount">
        <choose-service-account
          @serviceChange="assistServiceChange"
          :description="isDiscuss ? '辅助拉讨论组账号' : '辅助拉群账号'"
          :showTitle="false"
          :multiple="true"
        ></choose-service-account>
      </div>
      <!-- <p class="discussCondation">
        营销条件
      </p> -->
      <!-- <div class="maxCount flex-row">
        <span>讨论组人数</span>
        <input type="number" class="layui-input" v-model="membercount">
        <span>人（最多39人）</span>
      </div> -->
      <!-- <div class="checkSendType">
        <input type="radio" name="sendType" :checked="sendType=='manual'" @change="changeSendType('manual')">
        <span>手工发送</span>
        <input type="radio" name="sendType" :checked="sendType=='auto'" @change="changeSendType('auto')">
        <span>自动发送</span>
      </div>
      <div class="quickReplyContainer autoGrow flex-column">
        <quick-replies title="" :btnsTop="true" @change="quickMsg"></quick-replies>
      </div> -->
    </div>
    <div class="addDiscussMember flex-column">
      <div class="subTitle">{{isDiscuss ? '添加讨论组成员方式' : '添加群成员方式'}}</div>
      <div class="fontGrey desc">由于不确定对方是否会通过好友，请多添加一些目标用户</div>
      <layui-select :options="selectOptions" @selectChange="selectChange"></layui-select>
      <textarea
        class="inputAccounts"
        placeholder="请输入微信号或手机号码，每行为一个号码"
        v-if="addType=='stranger'"
        v-model="accounts">
      </textarea>
      <div class="friendsListTitle" v-if="addType=='friend'">
        好友{{friends.length}}
      </div>
      <div class="autoGrow flex-column freindsList" v-if="addType=='friend'">
        <label v-for="(item) in friends" :key="item.id">
          <user-list-item
            :item="item"
            :showBadge="false"
            :showGender="true"
            :showLastMessage="false"
            currentUserWxid=""
          >
            <template v-slot:checkbox>
              <div>
                <input type="checkbox"
                  :checked="checkedFriends.includes(item.id)"
                  @change="toggleCheckFriend(item, $event)">
              </div>
            </template>
            <template v-slot:bottomInfo>
              <div>
                {{item.friendwxid || item.wxid}}
              </div>
            </template>
          </user-list-item>
        </label>
        
      </div>
      <div>
        <input type="text"
        class="searchGroup layui-input"
        placeholder="请输入群关键词"
        v-if="addType=='group'"
        v-model="groupKeyword"/>
      </div>
      <div class="autoGrow flex-column groupsList" v-if="addType=='group'">

        <div class="flex-column"
          v-for="(item, index) in filteredGroups"
          :key="index"
        > 
          <div style="width:100%" class="invite-item">
            <input type="checkbox" :disabled="!currentGroup[item.id] || !currentGroup[item.id].open" 
              :checked="currentGroup[item.id] && currentGroup[item.id].checked[0]" name="group" 
              @change="checkAllMember($event,item)" />
            <label class="flex-row" @click="openGroup(item)">
              <div class="invite-avatar">
                <img style="background:#ccc" :src="item.avatar" alt="">
              </div>
              <div class="invite-info">
                <span>{{item.groupname||'聊天群'}}</span>
                <span class="fontGrey">
                  <span>群成员{{item.personnum}} </span>
                  <span>非好友{{item.personnum - item.friendNum}}</span>
                  </span>
              </div>
            </label>
            
          </div>
          <div class="flex-column groupMembersListContainer" v-if="currentGroup[item.id] && currentGroup[item.id].open">
            <div>
              <input type="text" class="searchGroup layui-input"
                placeholder="请输入群成员昵称"
                v-model="groupSearch">
            </div>
            <div class="groupMembersList">
              <label v-for="(memberid) in groupMembersList[item.id]" :key="friendsMap[memberid].id">
                <user-list-item
                  :item="friendsMap[memberid]"
                  :showBadge="false"
                  :showGender="true"
                  :showLastMessage="false"
                  currentUserWxid=""
                >
                  <template v-slot:checkbox>
                    <div>
                      <input type="checkbox"
                        :checked="checkedMembers.includes( memberid )"
                        @change="toggleCheckMember(friendsMap[memberid], $event)">
                    </div>
                  </template>
                  <template v-slot:bottomInfo>
                    <div>
                      {{ friendsMap[memberid].friendwxid||friendsMap[memberid].wxid }}
                    </div>
                  </template>
                </user-list-item>
              </label>
              
            </div>
          </div>
        </div>
      </div>
      <div class="groupName flex-row">
        <span>{{isDiscuss ? '讨论组' : '群'}}名称</span><input type="text" placeholder="不填写则为默认名称" class="layui-input" v-model="groupName">
      </div>
      <div class="confirmContainer">
        <!-- <button class="layui-btn layui-btn-sm" @click="confirmAdd">添加</button> -->
      </div>
    </div>
    <div class="discussDetailContainer autoGrow flex-column">
      <div class="subTitle">发送成员</div>
      <div class="members flex-row" style="display: inline-flex;flex-flow: row wrap; align-content: flex-start;">
        <div class="flex-column user-group">
          <div class="user-group-name">好友</div>
          <div class="user-group-sv">
          <label v-for="(memberid) in checkedFriends" :key="friendsMap[memberid].id">
            <user-list-item
              :item="friendsMap[memberid]"
              :showBadge="false"
              :showGender="true"
              :showLastMessage="false"
              currentUserWxid=""
            >
              <template v-slot:bottomInfo>
                <div>
                  {{ friendsMap[memberid].friendwxid||friendsMap[memberid].wxid }}
                </div>
              </template>
            </user-list-item>
          </label>
          </div>
        </div>
        <div class="flex-column user-group">
          <div class="user-group-name">非好友</div>
          <div class="user-group-sv">
          <label v-for="(member,index) in strangerMembers" :key="index">
            <user-list-item
              :item="member"
              :showBadge="false"
              :showGender="true"
              :showLastMessage="false"
              currentUserWxid=""
            >
              <template v-slot:bottomInfo>
                <div>
                  {{ member.friendwxid||member.wxid }}
                </div>
              </template>
            </user-list-item>
          </label> 
          </div>
        </div>
        <div class="flex-column user-group">
          <div class="user-group-name">群成员</div>
          <div class="user-group-sv">
          <label v-for="(memberid) in checkedMembers" :key="friendsMap[memberid].id">
            <user-list-item
              :item="friendsMap[memberid]"
              :showBadge="false"
              :showGender="true"
              :showLastMessage="false"
              currentUserWxid=""
            >
              <template v-slot:bottomInfo>
                <div>
                  {{ friendsMap[memberid].friendwxid||friendsMap[memberid].wxid }}
                </div>
              </template>
            </user-list-item>
          </label>
          </div>
        </div>

      </div>
      <div class="sendButtons">
        <button class="layui-btn layui-btn-sm" @click="confirmSend()">即时发送</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" @click="timeSend">定时发送</button>
      </div>
      <div class="createTabs flex-row">
        <!-- <div :class="['subTitle', 'createTab', createTab=='progress' && 'activeTab']"
          @click="changeCreateTab('progress')">创建进度</div> -->
        <div :class="['subTitle', 'createTab']" >创建记录</div>
      </div>
      <div class="autoGrow flex-column detailList">
        <div class="ongoingItem flex-column"
          :key="progress.id"
          v-for="(progress, index) in progressList">
          <div class="flex-row progressHead">
            <div class="flex-column autoGrow servicesInfo">
              <div>群名称：[{{ progress.groupname }}] 群主： {{ getFriendsByWxAccounts([progress.accountwxid])[0] }} {{  getSecondWxAccount(progress)}}</div>
              <div class="progressDetailInfo fontGrey">
                {{ formatTime(progress.createtime) }} {{progress.starttime ?'定时发送':'即时发送'}}
              </div>
            </div>
            <div class="rightButtons flex-row">
              <button class="layui-btn layui-btn-xs" v-if="progress.sendcount < progress.membercount">发送中</button>
              <button class="layui-btn layui-btn-xs layui-btn-danger" v-if="progress.sendcount < progress.membercount" @click="cancelSend(progress)">取消发送</button>
              <!-- <button class="layui-btn layui-btn-xs" v-if="progress.groupno" @click="exportQRCode(progress)">导出二维码</button> -->

              <el-popover
                v-if="progress.groupno"
                placement="top-start"
                width="200"
                trigger="click"
                @show="getQrCodeBase(progress)"
                content="aa">
                <button slot="reference" style="margin:0 10px" class="layui-btn layui-btn-xs">导出二维码</button>
                <div v-loading="qrcodeBase===''">
                    <el-image style="width:200px;height:200px" :src="qrcodeBase"></el-image>
                    <el-button type="primary" size="mini" @click="downloadQrCode">保存到本地</el-button>
                </div>
              </el-popover>
              
              <button class="layui-btn layui-btn-xs" v-if="progress.groupno" @click="toChat(progress)">发送消息</button>
              <!-- <button class="layui-btn layui-btn-xs layui-btn-danger dismissGroup" @click="dismissGroup(progress)">解散该{{isDiscuss ? '讨论组' : '群'}}</button> -->
            </div>
          </div>
          <div class="progressBarInfo flex-row">
            <div class="autoGrow">
             
              {{ progress.membercount?progress.sendcount/progress.membercount * 100:0 }}
              <el-progress :show-text="false" :percentage="progress.membercount?progress.sendcount/progress.membercount * 100:0"></el-progress>
            </div>
            <!-- <div class="autoGrow"></div> -->
            <span class="progressPercent" >
              <!-- {{progress.completeUsers.length}}/{{progress.totalCount}} -->
            </span>
            <button class="layui-btn layui-btn-xs layui-btn-warm" @click="toggleDetailShow(progress, index)">
              {{progress.showDetail ? '收起' : '详细'}}
            </button>
          </div>
          <div class="progressTabs" v-if="progress.showDetail">
            <button
              @click="changeProgressListType( index,0)"
              :class="['layui-btn', 'layui-btn-xs', progress.listType?'layui-btn-primary':'']">已进讨论组</button>
            <button
              @click="changeProgressListType( index,1)"
              :class="['layui-btn', 'layui-btn-xs', progress.listType?'':'layui-btn-primary']">待拉用户</button>
          </div>
          <div class="checkedUsers" v-if="progress.showDetail">
            <user-list-item
              v-for="(user, i) in !progress.listType ? progress.wxGroupTaskItemList.filter(item=>item.curstep===3) : progress.wxGroupTaskItemList.filter(item=>item.curstep!==3)"
              :item="user"
              :showGender="false"
              :showBadge="false"
              :showLastMessage="false"
              currentUserWxid=""
              :key="i">
              <template v-slot:bottomInfo>
                <div>
                  {{user.wxid||user.searchname}}
                </div>
              </template>
              <template v-slot:attachInfo>
                <div v-if="user.updatetime">
                  {{ formatTime(user.updatetime) }}
                </div>
              </template>
            </user-list-item>
          </div>
        </div>
      </div>
    </div>
    <custom-dialog v-if="showDialog" :title="isDiscuss ? '发送讨论组消息' : '发送群消息'" :closeDialog="closeDialog">
      <quick-replies :btnsTop="true" title="" @change="sendMessage"></quick-replies>
      <template v-slot:buttons>
        <div class="flex-row buttons">
          <button class="layui-btn layui-btn-normal submitInfo" @click="confirmSend">发送</button>
        </div>
      </template>
    </custom-dialog>
    <custom-dialog v-if="showQRCodeDialog" wrapClass="qrCodeDialog" title="导出二维码" :closeDialog="()=>this.showQRCodeDialog=false">
      <img src="" class="qrcode" alt="">
      <template v-slot:buttons>
        <div class="flex-row buttons">
          <button class="layui-btn layui-btn-normal submitInfo" @click="confirmSend">保存到材料库</button>
          <button class="layui-btn layui-btn-normal submitInfo" @click="confirmSend">保存到本地</button>
        </div>
      </template>
    </custom-dialog>

    <time-picker
      v-if="showDatePicker"
      @closeTimePicker="()=>this.showDatePicker=false"
      @submit="submitSendTime">
    </time-picker>

  </div>
</template>
<script>
import ChooseServiceAccount from '@/components/chooseServiceAccount';
import UserListItem from '@/components/userListItem';
import { getChatid,getAccountid } from '@/lib/data-translate'
import QuickReplies from './quickReplies';
import CustomDialog from '@/components/customDialog';
import LayuiSelect from '@/components/layuiSelect';
import TimePicker from '@/components/timePicker';
import { mapState, mapMutations, mapActions } from 'vuex';
import { downloadFromBrowser } from '@/lib/utils'

export default {
  name: 'addDiscuss',
  data() {
    return {
      showDatePicker:false,
      showDialog: false,
      showQRCodeDialog: false,
      qrcodeBase:'',
      groupKeyword: '',
      groupSearch: '',
      groupName: '',
      sendType: 'auto',
      membercount: '',
      addType: '',
      accounts: '',
      createTab: 'progress', // record
      selectOptions: [
        {
          value: 'stranger',
          label: '陌生人',
          type:0 
        },
        {
          value: 'friend',
          label: '好友',
          type:1 
        },
        {
          value: 'group',
          label: '群聊',
          type:2
        }
      ],
      checkedMembers: [],
      checkedFriends: [],
      
      friendsMap:{},
      friendsList:{},

      groupsMap:{},
      groupsList:{},

      groupMembersMap:{},
      groupMembersList:{},

      strangerMembers:[],

      progressList: [],
      currentGroup: [],
      choosenGroup: null,
      choosenMessage: null,

      mainService:{}, // 主账号只有一个
      assistService:[], // 多个辅助账号
      msgcontent:''

    }
  },
  mounted() {
     
    this.progressList = []
    this.$nextTick(()=>{
      this.$element.render()
    })
    this.getRecord()
  },
  computed: {
    ...mapState(['accountMap','uistate']),
    csid(){
      return this.uistate.adminid
    },
    formatedAccounts() {
      if (!this.accounts.trim()) return []
      return this.accounts.split('\n');
    },
    isDiscuss() {
      console.log(this.$route)
      return this.$route.name == 'discuss'
    },
    filteredGroups(){
      const groupKeyword = this.groupKeyword
      console.log(this.groups)
      if (groupKeyword == '') return this.groups;
      return this.groups.filter(g=>g.groupname.indexOf(groupKeyword)>-1);
    },  
    friends(){
      let friends = []
      let { id } = this.mainService;
      let ids = this.assistService.map(i=>i.id)
      if(id)ids.push(id)
      ids = Array.from(new Set( ids  ))
      ids.forEach(_id=>{
        const _friend = this.friendsList[_id]
        if(_friend)
        friends = friends.concat(_friend)
      })
      console.log(friends)
      return friends.map(id=>this.friendsMap[id]).filter(item=>{
        return !item.isbrand && !item.isent
      })
    },
    groups(){
      let groups = []
      let { id } = this.mainService;
      let ids = this.assistService.map(i=>i.id)
      if(id)ids.push(id)
      ids = Array.from(new Set( ids  ))
      ids.forEach(_id=>{
        const _group = this.groupsList[_id]
        if(_group)
        groups = groups.concat(_group)
      })
      return groups.map(id=>this.groupsMap[id])
    },
    
  },
  components: {
    ChooseServiceAccount,
    QuickReplies,
    LayuiSelect,
    UserListItem,
    CustomDialog,
    TimePicker
  },
  watch: {
    accounts(val,oldVal){
      if(val!==oldVal && val.split('\n').length !== oldVal.split('\n').length){
        const strArr = val.split('\n')
        this.strangerMembers = strArr.filter(item=>item).map(str=>{
          return {
            friendnick: str,
            friendwxid: str 
          }   
        })
      }
    },
    mainService(newservice,oldservice){
      if(newservice.wxid !== oldservice.wxid){
        
      }
      console.log(newservice,oldservice)
    }   
  },
 
  methods: {
    ...mapMutations(['updateUIState']),
    ...mapActions(['addChatByFriend','requestChatMap']),

    getFriends(service){
      const { csid,wxid,id } = service
      if(!id) return;
      if(this.friendsList[id] && this.friendsList[id].length)return
      return this.$api.friend.list({csid,wxaccount:wxid})
      .then(data=>{
        let friendsList = {}
        friendsList = data.map(item=>{
          this.friendsMap[item.id] = item
          return item.id
        })

        this.$set(this.friendsList,id,friendsList)
      }).catch(e=>{
        this.$msg(e)
      })

    },
    getGroups(service){
      const { csid,wxid,id } = service
      if(!id) return;
      if(this.groupsMap[id] && this.groupsMap[id].length)return
      return this.$api.group.list({
        csid,
        wxaccount:wxid
      })
        .then(data=>{
          let groupsList = {}
          groupsList = data.map(item=>{
            this.groupsMap[item.id] = item
            return item.id
          })
          this.$set(this.groupsList,id,groupsList)
          
        }).catch(e=>{
          this.$msg(e)
        })
    },

    getMembersByGroup(group){
      const { csid,wxaccount,groupno,id } = group
      if(!id)return;
      if(this.groupMembersList[id] && this.groupMembersList[id].length)return
      return this.$api.group.members({csId:csid,wxAccount:wxaccount,groupNo:groupno})
        .then(data=>{
          let groupMembersList = {}
          groupMembersList = data.map(item=>{
            this.friendsMap[item.id] = item
            return item.id
          })
          this.$set(this.groupMembersList,id,groupMembersList)
        })
        .catch(e=>{
          this.$msg(e)
        }) 
    },

    getRecord(){
      console.log('getRecord')
      const taskType = this.isDiscuss?0:1
      const csid = this.csid;
      const params = {
         csId:csid, 
        //  wxAccount:wxid,  //T11465
         taskType
      }
      this.$api.groupTask.getSendList(params)
        .then(data=>{
          this.progressList = data
          console.log(data)
        })
        .catch(e=>{
          this.$msg(e)
        })
    },
    

    mainServiceChange(services) {
      this.mainService = services?services[0]:{}
      this.getFriends(this.mainService)
      this.getGroups(this.mainService)
    },
    assistServiceChange(services) {
      this.assistService = services
      this.assistService.forEach(item=>{
        this.getFriends(item)
        this.getGroups(item)
      })
      console.log(services)
    },
    changeSendType(type) {
      this.sendType = type
    },
    selectChange(val) {
      console.log(val)
      this.addType = val
    },
    toggleCheckFriend(friend, e) {
      if (e.target.checked) {
        this.checkedFriends.push(friend.id)
      } else {
        this.checkedFriends = this.checkedFriends.filter(id=>id!=friend.id)
      }
    },
    toggleCheckMember(friend, e){
      if (e.target.checked) {
        this.checkedMembers.push(friend.id)
      } else {
        this.checkedMembers = this.checkedMembers.filter(id=>id!=friend.id)
      }
    },
    toggleDetailShow(progress, index) {
      this.$set(this.progressList, index, {
        ...progress,
        showDetail: !progress.showDetail
      })
    },
    changeProgressListType( index,type) {
      const progress = this.progressList[index];
      this.$set(this.progressList, index, {
        ...progress,
        listType: type
      })
    },
    confirmAdd() {
      console.log(this.checkedMembers)
    },
    changeCreateTab(tab) {
      this.createTab = tab;
    },
    // 全选组
    checkAllMember(e,member){

    },
    // 展开群组
    openGroup(group){
      const id = group.id;
      let _group = this.currentGroup[id]
      if(!_group)_group = { open:false,checked:[] }

      if( _group.open){
        _group.open = false
      }else{
        _group.open = true
        this.getMembersByGroup(group)
      }
      this.$set(this.currentGroup,id,_group)
      
    },
    
    changeCurrentGroup(e,group) {
      this.groupSearch = ''
      if(e.target.checked){
        if(!this.currentGroup.includes(group.id)){
          this.currentGroup.push(group.id)  
          this.getMembersByGroup(group)
        }
      }else{
        this.currentGroup = this.currentGroup.filter(_id=>_id != group.id)
      }
      console.log('changeCurrentGroup',this.currentGroup)
       
    },
    cancelSend(progress) {
      this.$api.groupTask.cancel({id:progress.id,status:2})
      .then(e=>{
        this.progressList = this.progressList.filter(item=>item.id!==progress.id)  
      })
      .catch(e=>this.$msg(e))
    },
    dismissGroup(group) {
      console.log('dismiss: ')
      console.log(group)
    },
    exportQRCode(group) {
      this.showQRCodeDialog = true
    },
    sendMessage(message) {
      this.choosenMessage = message
    },
    openDialog(group) {
      this.showDialog = true
      this.choosenGroup = group
    },
    closeDialog() {
      this.showDialog = false
    },
    quickMsg(replies){
      this.msgcontent = JSON.stringify(replies[replies.length-1])
    },
    timeSend(){
      this.showDatePicker = true
    },
    submitSendTime(time){
      this.confirmSend(time)
      this.showDatePicker = false
    },
    confirmSend(time) {
      if(!this.mainService)return this.$msg('请选择群主账号')
      if(!this.groupName)return this.$msg('请填写群名称')
      const {csid,wxid } =  this.mainService
      const secondWxAccount = this.assistService.map(item=>item.wxid)
      const taskType = this.isDiscuss?0:1
      const membercount = this.strangerMembers.length + this.checkedFriends.length + this.checkedMembers.length + secondWxAccount.length
      let params = {
        csid, 
        accountwxid:wxid,
        tasktype:taskType, //0:建讨论组 1:建群,   
        secondWxAccount, //辅助账号,
        // memberType,  //0：搜索 1:好友 2：群成员, 
        searchNameList:this.strangerMembers.map(item=>item.friendwxid), // 群成员搜索名列表, 
        inviteFriendList: this.checkedFriends.map(id=>({
          friendAccount:this.friendsMap[id].friendwxid,
          wxAccount:this.friendsMap[id].wxaccount,
          nick:this.friendsMap[id].friendnick,
          avatar:this.friendsMap[id].avatar
        })),
        inviteGroupFriendList:this.checkedMembers.map(id=>({ 

          wxAccount:this.friendsMap[id].wxaccount,
          groupNo:this.friendsMap[id].groupno,
          isMyContact:this.friendsMap[id].ismycontact,
          wxId:this.friendsMap[id].wxid,
          nick:this.friendsMap[id].nick,
          avatar:this.friendsMap[id].avatar

        })),
        groupname:this.groupName, //讨论组或者群名称
        msgcontent:this.msgcontent,
        membercount,
        starttime:time

      }
      this.$api.groupTask.insert(params)
        .then(data=>{
          this.progressList.unshift(data)
          this.$msg('任务创建成功')
        })
        .catch(e=>{
          this.$msg(e)
        })

    },
    getFriendsByWxAccounts(wxarr){
      return Object.values(this.accountMap).filter(account=>wxarr.includes(account.wxid)).map(account=>account.nick)     
    },
    getSecondWxAccount(progress){
      const { accountwxid,manageaccounts } = progress;
      const manageArr = manageaccounts.split(',').filter(item=>item!=accountwxid)
      
      if(manageArr.length)
        return '辅助拉群：'+Object.values(this.accountMap).filter(account=>manageArr.includes(account.wxid)).map(account=>account.nick).join(',')   
    },
    toChat(record){
      const { accountwxid,groupno,csid,groupname } = record;
      
      const accountid = getAccountid(this.accountMap,csid,accountwxid)
      const chatid = getChatid(csid,accountid,groupno)

      this.updateUIState({ accountid })
      this.requestChatMap({csid,wxaccount:accountwxid})
      .then(rs=>{
        if(rs&&rs[0]){
          let _group = {
            csid,
            accountid,
            wxaccount:accountwxid,
            friendnick:groupname,
            friendNick:groupname,
            friendwxid:groupno,
            //avatar:group.avatar
          }
          
          this.addChatByFriend(_group) // 添加到chat相关
          this.$router.push({
              name: 'home',
          })
          setTimeout(()=>{
              this.updateUIState({ chatid })
          },0)
            
        }
            
      })
      // this.addChatByFriend({...friend,id:undefined}) // 添加到chat相关
    },
    getQrCodeBase(record){
      const { csid ,accountwxid,groupno } = record
      const params = {
         csId:csid,
          wxAccount:accountwxid ,
           groupNo:groupno
      }
      this.$api.group.groupQrcode(params)
        .then(data=>{
          if(data)
            this.qrcodeBase = 'data:image/png;base64,'+data  
        }).catch(e=>{
          this.qrcodeBase = 'data:image/png;base64,'
          this.$msg(e);
        })
    },
    downloadQrCode(e){
      downloadFromBrowser(this.qrcodeBase) 
    }
    
  }
}
</script>
<style scoped>
.setSendInfo{
  overflow:inherit;
}
.discussDetailContainer .detailList{
  overflow: visible;
}
.invite-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  /* flex: 0 0 50%; */
  overflow: hidden;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  width: 50%

}
.invite-avatar{
  width: 40px;
  height:40px;
  
  margin-left: 5px;
}
.invite-avatar img{
  width: 40px;
  height:40px;
  border-radius: 3px;
}
.invite-info{
  
  flex-direction: column;
  justify-content:space-between;
  display: flex;
  margin-left: 5px
}

.groupMembersList{
  max-height: 250px;
  overflow: auto;
}
.user-group{
  width:33.3333%;
  height:100%
}
.user-group-sv{
  overflow:auto;
}
.user-group-name{
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    background: #f1f1f1;
    color: #666;
}
</style>